<template>
    <el-card style="width: 480px;margin:200px auto">
        <div style="background: #2c3e50;width: 100%;height: 80px">
            <span style="color:#ffffff;font-size:40px;height:80px;line-height: 80px">天佑OA系统</span>
        </div>
        <el-form v-model="form" ref="form">
            <el-form-item label="账号">
                <el-input v-model="form.username"  placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码" >
                <el-input type="password" v-model="form.password"  placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item style="width: 300px;margin:auto;margin-bottom: 10px">
                <span style="color:green">{{msg2}}</span>
                <slide-verify
                        ref="slideblock"
                        @again="onAgain"
                        @fulfilled="onFulfilled"
                        @success="onSuccess"
                        @fail="onFail"
                        @refresh="onRefresh"
                        :accuracy="accuracy"
                        :slider-text="text"/>
            </el-form-item>
            <span style="color:red">{{msg}}</span>
        </el-form>
    </el-card>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return{
                msg:"",
                msg2:"",
                form:{username:"",password:""},
                text: '向右滑登录',
                // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
                accuracy: 1,
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password:[
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            login(){
                if(this.form.username == ''){
                    this.msg = "账号不能为空";
                    return;
                }
                if(this.form.password == ''){
                    this.msg = "密码不能为空";
                    return;
                }
                this.$http.post("/user/login",this.$qs.stringify(this.form))
                    .then(res => {
                        if(res.data){
                            this.$message.info("登录成功");
                            this.$router.push("/index");
                        }else{
                            this.msg = "账号或密码错误";
                            this.$refs.slideblock.reset();
                        }
                    });
            },
            onSuccess(times){
                this.msg2 = '验证通过, 耗时'+(times / 1000).toFixed(1)+'s';
                this.login();
            },
            onFail(){
                this.msg2 = '验证不通过'
            },
            onRefresh(){
                this.msg2 = ''
            },
            onFulfilled() {
                console.log('刷新');
                this.msg = '';
            },
            onAgain() {
                this.msg2 = '检测到非人为操作，再试一次！';
                this.$refs.slideblock.reset();
            }
        }
    }
</script>

<style scoped>

</style>